<template>
	<view class="advice">
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<view class="advice-box">
			<view class="cu-form-group">
				<view class="title">联系方式</view>
				<input v-model="phone" placeholder="请输入您的联系方式" name="input"></input>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">反馈意见</view>
				<textarea v-model="advice" placeholder="请输入您的反馈意见"></textarea>
			</view>
		</view>
		<button class="button" @click="submit">提交</button>
		<tip-modal @hideModal="hideModal" :modalName="modalName" title="提示" :content="content"></tip-modal>
	</view>
</template>

<script>
	import TipModal from '../../components/TipModal.vue'
	import {addAdvice} from '@/api/advice.js'
	import {mapState} from 'vuex'
	export default {
		components: {
			TipModal
		},
		data() {
			return {
				phone: '',
				advice: '',
				modalName: '',
				content: '',
				title: ''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			submit() {
				console.log('....')
				const phone = this.phone.trim()
				const advice = this.advice.trim()
				if (phone === '' || advice === '') {
					this.content = '请输入联系方式和反馈意见后提交'
				}
				else {
					const data = {
						userid: this.userInfo.userid,
						content: this.content,
						phone: this.phone
					}
					addAdvice(data).then(res => {
						this.content = '我们已经收到了您的反馈，很感谢您的帮助~'				
						this.modalName = 'Modal'
					})
				}
			},
			hideModal() {
				this.modalName = ''
				this.phone = ''
				this.advice = ''
			}
		}
	}
</script>

<style lang="scss">
	.advice-box {
		margin-bottom: 50upx;
	}
	.button {
		position: absolute;
		font-size: $uni-font-size-base;
		background: linear-gradient(to right, #ffe7ba, $theme-color);
		border-radius: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 300rpx;
		color: #fff
	}
</style>
